/<template>
  <div class="conten">
    <div class="playletInfo rowFlex columnCenter">
      <div class="images"><img
          :src="cover || data.cover"
          alt=""
        ></div>
      <div class="text">
        <div class="title">{{ title || data.title }}</div>
        <div class="introduce">{{ data.introduce || '' }}</div>
      </div>
    </div>
    <div class="table-table">
      <div
        v-if="playInfo.chapter_id"
        class="rowFlex spaceBetween columnCenter"
        style="margin-bottom:8px;"
      >
        <p class="title">集数列表</p>
        <p class="introduce">您刚刚浏览了第{{ playInfo.chapter_num }}集 播放 <el-button
            type="text"
            style="font-size:14px;"
            @click="nextVideo"
          >下一集</el-button> </p>
      </div>
      <BiTable
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        :row-class-name="tableRowClassName"
      >
        <template v-slot:zip="{ row }">
          <div class="rowFlex ">
            <el-button
              type="text"
              size="medium"
              @click="play(row)"
            >播放</el-button>
            <el-button
              type="text"
              size="medium"
              @click="downloadVideo(row)"
            >下载</el-button>
          </div>
        </template>
      </BiTable>
    </div>
    <VideoPlayVue
      v-if="videoFlag"
      :play-info.sync="playInfo"
      :table-data="tableData"
      :is-title="false"
      @changePlaylet="changePlaylet"
      @close="close"
    ></VideoPlayVue>
  </div>
</template>

<script>
import VideoPlayVue from '@/common/component/videoPlay.vue'
import { downloadVideo } from '@/utils/index'
export default {
  name: 'TheaterDetails',
  components: {
    VideoPlayVue
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      tableData: [],
      videoActive: 0,
      tableColums: [
        {
          label: '剧集',
          prop: 'chapter_num',
          width: 180,
          render: (h, { row }) => {
            return <span>第 {row.chapter_num} 集</span>
          }
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      cover: '',
      title: '',
      introduce: '',
      playInfo: {},
      drawer: {
        title: '',
        GenerateLink: false,
        row: {}
      },
      videoFlag: false
    }
  },
  watch: {
    playInfo(newVal, oldVal) {
      if (newVal && newVal.id) {
        const index = this.tableData.findIndex((item) => item.id === newVal.id)
        this.videoActive = index
      }
    }
  },
  mounted() {
    this.onTheaterDetails()
  },
  methods: {
    changePlaylet(data) {
      this.playInfo = data
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(this.videoActive === rowIndex)
      if (this.videoActive === rowIndex) {
        return 'success-row'
      }
      return ''
    },
    downloadVideo(row) {
      row.chapter_id = row.id
      downloadVideo(row, this)
    },
    onTheaterDetails(playlet_id, start_pay_chapter) {
      if (this.data.chapterList && this.data.chapterList.length > 0) {
        this.data.chapterList.map((item) => {
          item.id = item.chapter_id
          item.title = item.chapter_title
        })
        console.log(this.data)
        this.$set(this, 'tableData', this.data.chapterList)
        this.playInfo = this.data.chapterList[0]
        this.cover = this.data.chapterList[0].cover
        this.title = this.data.title
      }
    },
    play(row) {
      this.videoFlag = true
      this.playInfo = row
    },
    nextVideo() {
      const index = this.tableData.findIndex((item) => item.id === this.playInfo.id)
      if (this.tableData.length === 1) {
        this.$message.warning('没有下一集了')
        return
      }
      if (index === this.tableData.length - 1) {
        this.$message.warning('没有下一集了')
        return
      }
      this.playInfo = this.tableData[index + 1]
      this.videoFlag = true
    },
    close() {
      this.videoFlag = false
    },
    onClose() {
      this.drawer = {
        title: '',
        GenerateLink: false,
        row: {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.conten {
  width: 550px;
  padding: 20px;
  .playletInfo {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
  }

  .images {
    width: 106px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .createLink {
    ::v-deep .el-button {
      padding: 0 !important;
    }
  }
  .text {
    margin-left: 20px;
    .title {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
    }
    .introduce {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
}
</style>
<style >
.success-row {
  background: #f4fef8 !important;
}
</style>